<template>
  <div>
    <common-head :title="itemName" />
    <div class="container">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in pics" :key="banner.id">
          <img :src="banner.pic" alt="" />
        </van-swipe-item>
      </van-swipe>
      <hr />
      <img
        class="taba"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171119%2F8005f6085cf449d5a480732a203ae4ce.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637380525&t=cd76f15896308d294bcb1cc330301cdf"
        alt=""
      />
      <h3 class="names">{{ basicInfo.name }}</h3>

      <div class="imgs" v-html="content"></div>
      <!-- 商品导航 -->
      <van-goods-action>
        <van-goods-action-icon
          icon="wap-home-o"
          text="首页"
          @click="$router.push('/home')"
        />
        <van-goods-action-icon
        :badge="$store.state.cart.number"
          icon="cart-o"
          text="购物车"
          @click="$router.push('/cart')"
        />
        <van-goods-action-button
          type="danger"
          text="加入购物车"
          color="#ff4c77"
          @click="showSku(0)"
        />
        <van-goods-action-button
          type="danger"
          color="#ff734c"
          text="立即购买"
          @click="showSku(1)"
        />
      </van-goods-action>
      <!-- 商品导航 -->
      <!-- 弹出框 -->
      <van-popup
        v-model="skuShow"
        closeable
        round
        close-icon="close"
        position="bottom"
        :style="{ height: '35%' }"
      >
        <!-- 商品卡片 -->
        <div>
          <van-card
            :num="sku.num"
            :price="sku.minPrice"
            :title="sku.name"
            :thumb="sku.pic"
          >
            <template #footer>
              <van-stepper v-model="sku.num" />
            </template>
          </van-card>
          <van-button @click="confirmAction" size="large" type="danger" round
            >确认</van-button
          >
        </div>
        <!-- 商品卡片 -->
      </van-popup>
      <!-- 弹出框 -->
    </div>
  </div>
</template>

<script>
import CommonHead from "../../components/CommonHead.vue";
import { fetchItemDetail, addCart } from "_api";
import { getToken } from "_utils";
import { Toast } from "vant";
export default {
  name: "Detail",
  components: {
    CommonHead,
  },
  data() {
    return {
      basicInfo: {},
      content: "",
      pics: [],
      itemName: "详情页",
      // 显示隐藏弹出框
      skuShow: false,
      // 商品规格数据
      sku: {},
      actionCode: 0, // 0代表加入购物车，1代表立即购买
    };
  },
  created() {
    this.fetchDetail();
  },
  methods: {
    confirmAction() {
      // 点击商品规格弹窗的，确定按钮
      if (this.actionCode === 0) {
        addCart({
          goodsId: this.sku.id,
          number: this.sku.number,
          token: getToken(),
        }).then((res) => {
          this.skuShow=false
          if (res.data.code === 0) {
            Toast.success("加入购物车成功");
            this.$store.commit("cart/set_cart_info", {
              items: res.data.data.items,
              number: res.data.data.number,
            });
          }
        });
      } else {
        alert("立即购买");
      }
    },
    // 点击加入购物车
    showSku(code) {
      this.skuShow = true;
      this.actionCode = code;
    },
    fetchDetail() {
      // 请求商品详情
      fetchItemDetail(this.$route.params.id).then((res) => {
        if (res.data.code === 0) {
          console.log(res);
          this.basicInfo = res.data.data.basicInfo;
          this.content = res.data.data.content.replace(
            /<img/gi,
            '<img style="width:100%;display:block"'
          );
          this.pics = res.data.data.pics;
          this.itemName = this.basicInfo.name;
          // 购买商品的规格
          this.sku = {
            ...this.basicInfo,
            number: 1,
          };
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding-top: 46px;
  .my-swipe {
    width: 10rem;
    height: 8rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .names {
    text-align: center;
    font-size: 26px;
    color: rgb(250, 83, 32);
  }
  hr {
    border: 1px solid rgb(222, 233, 128);
  }
  .taba {
    width: 100%;
    height: 60px;
  }
  .van-popup {
    background: #fafafa;
  }
}
</style>